<script setup>
defineProps({
  timeline: {
    type: Object,
    required: true
  }
});
</script>

<template>
  <div class="timeline-card">
    <div class="timeline-date">{{ timeline.date }}</div>
    <div class="timeline-content">
      <h3>{{ timeline.title }}</h3>
      <p>{{ timeline.content }}</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.timeline-card {
  position: relative;
  padding: var(--gap);
  margin-bottom: var(--gap);
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--primary-color);

  &::before {
    content: '';
    position: absolute;
    left: -10px;
    top: var(--gap);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
  }

  .timeline-date {
    color: var(--primary-color);
    margin-bottom: var(--space);
  }

  .timeline-content {
    h3 {
      margin-bottom: var(--space);
    }
    
    p {
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>
